<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		.btnbox{
			display: flex;
			float: left;
			margin-left: 10px;

		}
		.btnbox button{
			width: 100px;
			height: 100px;
			display: block;
			padding: 10px;
			border: 1px solid #ccc;
			background: #fff;
			border-right: none;
		}
		.btnbox button:first-child{
			border-radius: 5px 0 0 5px;
		}
		.btnbox button:last-child{
			border-radius:0 5px 5px 0;
		    border-right:1px solid #ccc;
		}
	</style>
</head>
<body>
	<div class="btnbox">
		<button>btn1</button>
		<button>btn2</button>
		<button>btn3</button>
		<button>btn4</button>
	</div>
	<div class="btnbox">
		<button>btn5</button>
		<button>btn6</button>
		<button>btn7</button>
		<button>btn8</button>
	</div>
	<div class="btnbox">
		<button>btn9</button>
	</div>
	<div class="btnbox">
		<button>btn10</button>
	</div>
</body>
<script>
	var btnbox=document.getElementsByClassName('btnbox');//获取元素类为btn-box;
	
	function get(){
		for(var i=0;i<btnbox.length;i++){
			var length=btnbox[i].children.length;
			if (length==1) {
				var child=btnbox[i].children[0];
				child.style.borderRadius='5px ';
			}
		}
	}
	get();
</script>
</html>